<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Введение | Vue.js</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link href="static/css/css.css" rel="stylesheet">
    <link href="static/css/font-awesome.min.css" rel="stylesheet">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="manifest" href="https://v3.ru.vuejs.org/manifest.json">
    <link rel="apple-touch-icon" href="https://v3.ru.vuejs.org/images/icons/apple-icon-152x152.png">
    <script src="https://player.vimeo.com/api/player.js"></script>
    <script src="static/js/72160148.js" defer="defer"></script>
    <meta name="description" content="Vue.js - Прогрессивный JavaScript-фреймворк">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="static/css/0.styles.8c5eb347.css" as="style"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/app.643be286.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/9.270210be.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/281.d362a9be.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/31.a05b9d5a.js" as="script"><link rel="preload" href="https://v3.ru.vuejs.org/assets/js/20.aee666d2.js" as="script"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/1.e507ea88.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/10.ebd791f9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/100.3fcc5610.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/101.13861a0f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/102.76ce38ef.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/103.8c0de3bb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/104.394d0e6d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/105.bf3193f5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/106.c1bc5b46.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/107.22afceb9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/108.90982ea5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/109.40cc849d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/11.7bc08674.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/110.a43cd061.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/111.85f3d3e3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/112.9862105b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/113.0c4a5917.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/114.ae29effa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/115.17794186.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/116.c9af58df.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/117.25793ff1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/118.23bf516a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/119.61c37e94.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/12.7c79dcf8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/120.39c7e423.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/121.6e1b8f24.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/122.d8807d82.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/123.8e107dff.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/124.3de55d18.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/125.e26a21b7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/126.af88dbbd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/127.e2202fdc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/128.2e1eaff0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/129.b34e550f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/13.5a494ddf.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/130.c16d50b0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/131.ae3061c4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/132.477f12cd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/133.4ee65cfc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/134.1f849e32.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/135.ed166cfb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/136.f3a7c917.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/137.28242687.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/138.83165a3e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/139.45312b89.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/14.9fd5a46a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/140.ba1cc7e2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/141.27390e2f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/142.607b1b12.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/143.a7bcce6a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/144.8bdcada7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/145.430cbb5f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/146.b6b98fc6.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/147.622dd2e7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/148.983be479.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/149.04dbbbbe.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/15.749c2e37.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/150.c4a6113c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/151.c695ed45.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/152.9c7eec1e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/153.6cfad170.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/154.1e99eb42.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/155.e61c05a8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/156.4bf05c6a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/157.6d8f9ddf.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/158.e8b3485b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/159.276b3a63.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/16.7677328c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/160.e7da91af.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/161.8e7827b1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/162.e0c77298.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/163.55367233.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/164.f81c71d4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/165.86e676df.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/166.c1e87ed8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/167.e003ad14.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/168.4740e256.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/169.7bbc0d46.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/17.bd0eb4b2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/170.8cabc8b7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/171.83fc533d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/172.6b181db0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/173.5f5d8101.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/174.c7e1907b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/175.e4d4f239.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/176.15d8df67.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/177.f08502d1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/178.1c0d1767.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/179.fe1eb441.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/18.d969e648.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/180.4c8d5673.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/181.6d38cebd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/182.2b3ccc62.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/183.2e51b42b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/184.71bfad0f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/185.09444ce2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/186.b46647b3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/187.4d9ea707.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/188.2157c841.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/189.b5910624.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/19.4c161ba3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/190.cb994d54.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/191.73b72cec.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/192.f46c7b24.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/193.3eec7887.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/194.b050a9d9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/195.175ccde5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/196.3965c176.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/197.fdcc0456.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/198.d02e3bfc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/199.c4da5f12.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/2.68d2431a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/200.573e7138.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/201.58bb6332.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/202.8d1fe5ce.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/203.fdf4e4d2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/204.cb55c59b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/205.cac1c78d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/206.9e080ed7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/207.4e392d8a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/208.7cc1467e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/209.9356ccf1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/21.0695fc83.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/210.f026da8f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/211.03ae6885.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/212.67ddb827.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/213.59cbb78a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/214.07c869cd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/215.7fa931b4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/216.616135da.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/217.6a87d730.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/218.0e18a516.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/219.d5bf54f1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/22.f42d5bc7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/220.29b4633a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/221.30ac3717.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/222.03525bac.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/223.36988f2a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/224.d6c3e984.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/225.3776a412.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/226.6ec7ae1a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/227.7f9e55ed.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/228.b1704d0f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/229.43aaaa72.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/23.3d2d7576.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/230.c8e817b2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/231.df65fefa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/232.369fa903.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/233.2ab149ba.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/234.09ad9166.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/235.4ef61a46.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/236.b2672a4c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/237.a5248c94.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/238.c72bcff0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/239.a77f782d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/24.cc902a7a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/240.0f062ef5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/241.e9a2bc53.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/242.14e18c2b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/243.62abc295.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/244.87290b83.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/245.ae7218e9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/246.524e394f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/247.af90b65a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/248.9a42de5b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/249.e27e4b3e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/25.239356cf.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/250.b0ddca6d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/251.a10d7cac.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/252.cf19a4d3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/253.1d9c6bf8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/254.495e88d4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/255.ed174076.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/256.8e4ec162.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/257.627a2b90.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/258.54931a31.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/259.4939312b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/26.f1f16fe7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/260.c9896279.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/261.0288a200.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/262.0c7857a0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/263.487b0881.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/264.b224dabd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/265.10e2e9fa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/266.015d92d3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/267.06ae937e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/268.1e001d98.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/269.9a641151.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/27.41902b88.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/270.d5d2bb52.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/271.28e50c98.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/272.a134c155.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/273.f453e8ff.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/274.d053c4da.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/275.4d2c5ad5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/276.66373b99.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/277.7097fc68.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/278.c0fb24d5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/279.e165f433.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/28.7caf479d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/280.812493a8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/282.774e7138.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/283.9aea5606.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/284.01b2b0cb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/285.2180626a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/286.45a48b83.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/287.8d815523.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/288.36d84459.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/289.81011f32.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/29.2b30d85a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/290.75b8049c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/291.974e10d2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/292.7f2151e4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/293.f03519e9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/294.199acbb2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/295.c7daf40f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/296.caffc050.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/297.9d79fb29.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/298.4dcb84eb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/299.5e426c37.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/3.455aa85e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/30.b1b83425.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/300.fcfa98b1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/301.0ebf87f4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/302.136dd23a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/303.ebafeef4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/304.23903942.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/305.52d3b622.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/306.8772d7bb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/307.a8e91707.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/308.b775f889.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/309.76e54f23.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/310.549009ca.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/311.dc420c15.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/312.932576c8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/313.ad31234d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/314.b99e75bd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/315.db124df2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/316.a8971429.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/317.1aa3d342.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/318.77f9491b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/319.dc783cf9.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/32.6f30c60e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/320.ef02e854.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/321.0b14ac0c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/322.40a1d022.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/323.72f24bef.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/324.40ad516c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/325.9d308433.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/326.a536fdae.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/327.63b5c525.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/328.596588a5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/329.66750c33.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/33.0a6a005e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/330.f4b316fd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/331.e7a9fb45.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/332.b2013c15.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/333.27bc1e79.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/334.6e83939d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/335.cdf8f1ff.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/34.9589f582.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/35.5e4540eb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/36.4dbe02ea.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/37.b9262b74.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/38.68c60dfd.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/39.c942130a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/4.b8e11b69.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/40.ae01d7e3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/41.cff92131.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/42.dc77344b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/43.358825e3.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/44.c159f3f1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/45.64e83240.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/46.6c402a48.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/47.5cdba73b.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/48.cb875b8a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/49.7cf47462.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/5.2ae5cdce.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/50.93028c6d.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/51.867f50d8.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/52.8e77d1ce.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/53.f632d40e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/54.66b4faf7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/55.812d34b1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/56.de2bcaa0.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/57.3d8195e2.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/58.c1357c02.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/59.850b1804.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/6.6d538040.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/60.ae85572a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/61.c0e66493.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/62.496cb425.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/63.fde50bb7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/64.4c5a0b18.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/65.d2868d7f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/66.ffdb8018.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/67.5a846e52.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/68.b2543572.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/69.3731d434.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/70.10578e04.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/71.91daa253.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/72.a1b71064.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/73.21c88d21.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/74.a9bade12.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/75.9fbf87e6.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/76.3c13db11.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/77.e613c0c4.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/78.979d0967.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/79.81531d4e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/80.fac1e4ec.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/81.d38237f1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/82.2e54be5f.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/83.a294601a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/84.c7bfa583.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/85.5ccb83cc.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/86.c0dbe34e.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/87.f1c77aa7.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/88.ae27e2c1.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/89.59ac7598.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/90.199d5318.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/91.bda2c188.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/92.26841bca.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/93.9d2fed14.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/94.40cbd70a.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/95.7d3a3ccb.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/96.cfba2cfa.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/97.f082206c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/98.1600479c.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/99.e01ab5f5.js"><link rel="prefetch" href="https://v3.ru.vuejs.org/assets/js/vendors~search-page.14d8da50.js">
    <link rel="stylesheet" href="static/css/0.styles.8c5eb347.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index24.html" class="home-link router-link-active"><img src="static/picture/logo.png" alt="Vue.js" class="logo"> <span class="site-name can-hide">Vue.js</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Меню документации" class="dropdown-title"><span class="title">Документация</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="introduction8.html" class="nav-link">
  Руководство
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Рекомендации
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Книга рецептов
</a></li><li class="dropdown-item"><!----> <a href="markdown3.html" class="nav-link">
  Примеры
</a></li><li class="dropdown-item"><!----> <a href="writing-guide3.html" class="nav-link">
  Внести свой вклад
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Руководство по миграции
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  Справочник API
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Экосистема" class="dropdown-title"><span class="title">Экосистема</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Сообщество
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Команда
</a></li><li class="dropdown-subitem"><a href="partners4.html" class="nav-link">
  Партнёры
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Присоединяйтесь к сообществу Vue.js!
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Темы
</a></li></ul></li><li class="dropdown-item"><h4>
          Официальные проекты
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index7.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index8.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Еженедельные новости
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index10.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Блог
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Поддержать Vue" class="dropdown-title"><span class="title">Поддержать Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Однократное пожертвование
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Регулярные пожертвования
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Магазин футболок
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Переводы" class="dropdown-title"><span class="title">Переводы</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index12.html" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index.html" target="_blank" class="nav-link external">
  中文
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index13.html" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index14.html" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="translations2.html#community-translations" class="nav-link">
  Другие переводы
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Меню документации" class="dropdown-title"><span class="title">Документация</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="introduction8.html" class="nav-link">
  Руководство
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Рекомендации
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Книга рецептов
</a></li><li class="dropdown-item"><!----> <a href="markdown3.html" class="nav-link">
  Примеры
</a></li><li class="dropdown-item"><!----> <a href="writing-guide3.html" class="nav-link">
  Внести свой вклад
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Руководство по миграции
</a></li></ul></div></div><div class="nav-item"><a href="javascript:;" class="nav-link">
  Справочник API
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Экосистема" class="dropdown-title"><span class="title">Экосистема</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          Сообщество
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Команда
</a></li><li class="dropdown-subitem"><a href="partners4.html" class="nav-link">
  Партнёры
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Присоединяйтесь к сообществу Vue.js!
</a></li><li class="dropdown-subitem"><a href="javascript:;" class="nav-link">
  Темы
</a></li></ul></li><li class="dropdown-item"><h4>
          Официальные проекты
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="index4.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index5.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vuex
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue CLI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index7.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Test Utils
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index8.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Devtools
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index9.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Еженедельные новости
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="index10.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Блог
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Поддержать Vue" class="dropdown-title"><span class="title">Поддержать Vue</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Однократное пожертвование
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Регулярные пожертвования
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Магазин футболок
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Переводы" class="dropdown-title"><span class="title">Переводы</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index12.html" target="_blank" class="nav-link external">
  English
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index.html" target="_blank" class="nav-link external">
  中文
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index13.html" target="_blank" class="nav-link external">
  한국어
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="index14.html" target="_blank" class="nav-link external">
  日本語
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="translations2.html#community-translations" class="nav-link">
  Другие переводы
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="" aria-current="page" class="active sidebar-link">Введение</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#обзор" class="sidebar-link">Обзор</a></li><li class="sidebar-sub-header"><a href="#быстрыи-старт" class="sidebar-link">Быстрый старт</a></li><li class="sidebar-sub-header"><a href="#сборка-для-миграции" class="sidebar-link">Сборка для миграции</a></li><li class="sidebar-sub-header"><a href="#важные-новые-возможности" class="sidebar-link">Важные новые возможности</a></li><li class="sidebar-sub-header"><a href="#кардинальные-изменения" class="sidebar-link">Кардинальные изменения</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#глобальное-api" class="sidebar-link">Глобальное API</a></li><li class="sidebar-sub-header"><a href="#директивы-в-шаблонах" class="sidebar-link">Директивы в шаблонах</a></li><li class="sidebar-sub-header"><a href="#компоненты" class="sidebar-link">Компоненты</a></li><li class="sidebar-sub-header"><a href="#render-функции" class="sidebar-link">Render-функции</a></li><li class="sidebar-sub-header"><a href="#пользовательские-элементы" class="sidebar-link">Пользовательские элементы</a></li><li class="sidebar-sub-header"><a href="#другие-незначительные-изменения" class="sidebar-link">Другие незначительные изменения</a></li><li class="sidebar-sub-header"><a href="#удаленные-api" class="sidebar-link">Удалённые API</a></li></ul></li><li class="sidebar-sub-header"><a href="#поддержка-библиотек" class="sidebar-link">Поддержка библиотек</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#vue-cli" class="sidebar-link">Vue CLI</a></li><li class="sidebar-sub-header"><a href="#vue-router" class="sidebar-link">Vue Router</a></li><li class="sidebar-sub-header"><a href="#vuex" class="sidebar-link">Vuex</a></li><li class="sidebar-sub-header"><a href="#расширение-инструментов-для-разработчика" class="sidebar-link">Расширение инструментов для разработчика</a></li><li class="sidebar-sub-header"><a href="#поддержка-ide" class="sidebar-link">Поддержка IDE</a></li><li class="sidebar-sub-header"><a href="#другие-проекты" class="sidebar-link">Другие проекты</a></li></ul></li></ul></li><li><a href="javascript:;" class="sidebar-link">Сборка для миграции</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Подробности</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="javascript:;" class="sidebar-link">Массив ref-ссылок при использовании с v-for</a></li><li><a href="javascript:;" class="sidebar-link">Изменение синтаксиса для асинхронных компонентов</a></li><li><a href="javascript:;" class="sidebar-link">Изменено поведение при приведении значения атрибутов</a></li><li><a href="javascript:;" class="sidebar-link">Свойство $attrs теперь содержит class и style</a></li><li><a href="javascript:;" class="sidebar-link">Удалено свойство $children</a></li><li><a href="javascript:;" class="sidebar-link">Переименованы хуки пользовательских директив</a></li><li><a href="javascript:;" class="sidebar-link">Изменена обработка пользовательских элементов</a></li><li><a href="javascript:;" class="sidebar-link">Опцию data необходимо указывать только функцией</a></li><li><a href="javascript:;" class="sidebar-link">Добавлена опция emits</a></li><li><a href="javascript:;" class="sidebar-link">Удалено API для событий</a></li><li><a href="javascript:;" class="sidebar-link">Удалены фильтры</a></li><li><a href="javascript:;" class="sidebar-link">Добавлены фрагменты</a></li><li><a href="javascript:;" class="sidebar-link">Изменения функциональных компонентов</a></li><li><a href="javascript:;" class="sidebar-link">Изменения в глобальном API</a></li><li><a href="javascript:;" class="sidebar-link">Поддержка tree-shaking для глобального API</a></li><li><a href="javascript:;" class="sidebar-link">Удалён атрибут inline-template</a></li><li><a href="javascript:;" class="sidebar-link">Изменения использования атрибута key</a></li><li><a href="javascript:;" class="sidebar-link">Удалена поддержка модификаторов keyCode</a></li><li><a href="javascript:;" class="sidebar-link">Удалено свойство $listeners</a></li><li><a href="javascript:;" class="sidebar-link">Изменения в API монтирования</a></li><li><a href="javascript:;" class="sidebar-link">Удалена опция propsData</a></li><li><a href="javascript:;" class="sidebar-link">Удалён доступ к this в функции значения по умолчанию входного параметра</a></li><li><a href="javascript:;" class="sidebar-link">Изменён API render-функций</a></li><li><a href="javascript:;" class="sidebar-link">Выполнена унификация слотов</a></li><li><a href="javascript:;" class="sidebar-link">Добавлен компонент suspense</a></li><li><a href="javascript:;" class="sidebar-link">Переименованы некоторые классы transition</a></li><li><a href="javascript:;" class="sidebar-link">Использование transition корневым элементом</a></li><li><a href="javascript:;" class="sidebar-link">Корневой элемент transition-group больше не создаётся</a></li><li><a href="javascript:;" class="sidebar-link">Удалён модификатор v-on.native</a></li><li><a href="javascript:;" class="sidebar-link">Изменения в работе v-model</a></li><li><a href="javascript:;" class="sidebar-link">Изменён приоритет между v-if и v-for</a></li><li><a href="javascript:;" class="sidebar-link">Поведение при слиянии v-bind</a></li><li><a href="javascript:;" class="sidebar-link">События хуков жизненного цикла VNode</a></li><li><a href="javascript:;" class="sidebar-link">Использование watch для отслеживания изменений массива</a></li></ul></section></li></ul> </aside> <main class="page"><div class="carbon-ads"></div>  <div class="theme-default-content content__default"><h1 id="введение"><a href="#введение" class="header-anchor">#</a> Введение</h1> <div class="custom-block info"><p class="custom-block-title">Информация</p><p>Новичок во Vue.js? Начинать изучение лучше с <a href="introduction8.html">руководства</a>.</p></div><p>Это руководство в первую очередь предназначено для пользователей с опытом работы во Vue 2, которые хотят узнать о новых функциях и изменениях во Vue 3. <strong>Это не то, с чего надо начинать изучение и читать от начала до конца, прежде чем пробовать Vue 3.</strong> Несмотря на кажущиеся многочисленные изменения, многое что уже знаете и любите во Vue осталось прежним; просто хотим как можно основательнее и подробнее дать объяснения и примеры для каждого произошедшего изменения.</p> <ul><li><a href="#%D0%B1%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B8-%D1%81%D1%82%D0%B0%D1%80%D1%82">Быстрый старт</a></li> <li><a href="#%D1%81%D0%B1%D0%BE%D1%80%D0%BA%D0%B0-%D0%B4%D0%BB%D1%8F-%D0%BC%D0%B8%D0%B3%D1%80%D0%B0%D1%86%D0%B8%D0%B8">Сборка для миграции</a></li> <li><a href="#%D0%B2%D0%B0%D0%B6%D0%BD%D1%8B%D0%B5-%D0%BD%D0%BE%D0%B2%D1%8B%D0%B5-%D0%B2%D0%BE%D0%B7%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D0%B8">Важные новые возможности</a></li> <li><a href="#%D0%BA%D0%B0%D1%80%D0%B4%D0%B8%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F">Кардинальные изменения</a></li> <li><a href="#%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0-%D0%B1%D0%B8%D0%B1%D0%BB%D0%B8%D0%BE%D1%82%D0%B5%D0%BA">Поддержка библиотек</a></li></ul> <h2 id="обзор"><a href="#обзор" class="header-anchor">#</a> Обзор</h2> <br> <iframe src="javascript:;" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="allowfullscreen"></iframe> <p>Начать изучение Vue 3 на <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue Mastery<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> (на англ.).</p> <h2 id="быстрыи-старт"><a href="#быстрыи-старт" class="header-anchor">#</a> Быстрый старт</h2> <p>Если хотите попробовать Vue 3 в новом проекте:</p> <ul><li><p>Через CDN: <code>&lt;script src=&quot;https://unpkg.com/vue@next&quot;&gt;&lt;/script&gt;</code></p></li> <li><p>Песочница в браузере на <a href="javascript:;" target="_blank" rel="noopener noreferrer">Codepen<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>Песочница в браузере на <a href="javascript:;" target="_blank" rel="noopener noreferrer">CodeSandbox<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p></li> <li><p>Развернуть проект с помощью <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vite<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> init vite hello-vue3 -- --template vue <span class="token comment"># ИЛИ yarn create vite hello-vue3 --template vue</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>Развернуть проект с помощью <a href="javascript:;" target="_blank" rel="noopener noreferrer">vue-cli<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> -g @vue/cli <span class="token comment"># ИЛИ yarn global add @vue/cli</span>
vue create hello-vue3
<span class="token comment"># выбрать пресет vue 3</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></li></ul> <h2 id="сборка-для-миграции"><a href="#сборка-для-миграции" class="header-anchor">#</a> Сборка для миграции</h2> <p>Если собираетесь обновить до Vue 3 существующий проект или библиотеку на Vue 2, стоит воспользоваться специальной сборкой Vue 3, которая предоставляет API, совместимые с Vue 2. Более подробную информацию можно найти на странице про <a href="javascript:;">сборку для миграции</a>.</p> <h2 id="важные-новые-возможности"><a href="#важные-новые-возможности" class="header-anchor">#</a> Важные новые возможности</h2> <p>Некоторые из новых функций, которые появились во Vue 3:</p> <ul><li><a href="javascript:;">Composition API</a></li> <li><a href="javascript:;">Телепорты</a></li> <li><a href="javascript:;">Добавлены фрагменты</a></li> <li><a href="javascript:;">Добавлена опция emits в компонентах</a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>createRenderer</code> API из <code>@vue/runtime-core</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> для создания пользовательских рендеров</li> <li><a href="javascript:;">Однофайловые компоненты: синтаксический сахар Composition API (<code>&lt;script setup&gt;</code>)</a></li> <li><a href="javascript:;">Однофайловые компоненты: CSS-переменные на основе состояния (<code>v-bind</code> в <code>&lt;style&gt;</code>)</a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">Однофайловые компоненты: <code>&lt;style scoped&gt;</code> теперь могут содержать глобальные правила или правила только для содержимого слотов<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="javascript:;">Добавлен компонент suspense</a> <span class="badge warning" style="vertical-align:top;" data-v-0cc74adb="">экспериментально</span></li></ul> <h2 id="кардинальные-изменения"><a href="#кардинальные-изменения" class="header-anchor">#</a> Кардинальные изменения</h2> <p>Ниже приведён список кардинальных изменений в сравнении с 2.x:</p> <h3 id="глобальное-api"><a href="#глобальное-api" class="header-anchor">#</a> Глобальное API</h3> <ul><li><a href="javascript:;">Глобальное API Vue теперь применяется к экземпляру приложения</a></li> <li><a href="javascript:;">Глобальное и внутреннее API были реорганизованы для поддержки tree-shaking</a></li></ul> <h3 id="директивы-в-шаблонах"><a href="#директивы-в-шаблонах" class="header-anchor">#</a> Директивы в шаблонах</h3> <ul><li><a href="javascript:;">Использование <code>v-model</code> на компонентах было переработано, заменяя <code>v-bind.sync</code></a></li> <li><a href="javascript:;">Изменения использования<code>key</code> на <code>&lt;template v-for&gt;</code> и не-<code>v-for</code> узлах</a></li> <li><a href="javascript:;">Изменён приоритет <code>v-if</code> и <code>v-for</code> при использовании на одном элементе</a></li> <li><a href="javascript:;">Теперь учитывается порядок при использовании <code>v-bind=&quot;object&quot;</code></a></li> <li><a href="javascript:;">Удалён модификатор <code>v-on:event.native</code></a></li> <li><a href="javascript:;">Использование <code>ref</code> внутри <code>v-for</code> больше не регистрирует массив ссылок</a></li></ul> <h3 id="компоненты"><a href="#компоненты" class="header-anchor">#</a> Компоненты</h3> <ul><li><a href="javascript:;">Функциональные компоненты могут создаваться только простыми функциями</a></li> <li><a href="javascript:;">Удалён атрибут <code>functional</code> для <code>&lt;template&gt;</code> однофайловых компонентов, а также удалена опция <code>functional</code> в компонентах</a></li> <li><a href="javascript:;">Создание асинхронных компонентов теперь с помощью метода <code>defineAsyncComponent</code></a></li> <li><a href="javascript:;">События компонента теперь должны описываться с помощью опции <code>emits</code></a></li></ul> <h3 id="render-функции"><a href="#render-функции" class="header-anchor">#</a> Render-функции</h3> <ul><li><a href="javascript:;">Изменён API render-функций</a></li> <li><a href="javascript:;">Удалено свойство <code>$scopedSlots</code>, теперь все слоты доступны как функции через <code>$slots</code></a></li> <li><a href="javascript:;">Удалено свойство <code>$listeners</code> / теперь всё в <code>$attrs</code></a></li> <li><a href="javascript:;">Свойство <code>$attrs</code> теперь содержит <code>class</code> и <code>style</code></a></li></ul> <h3 id="пользовательские-элементы"><a href="#пользовательские-элементы" class="header-anchor">#</a> Пользовательские элементы</h3> <ul><li><a href="javascript:;">Проверка пользовательских элементов теперь происходит на этапе компиляции шаблона</a></li> <li><a href="javascript:;">Использование специального атрибута <code>is</code> ограничено тегом <code>&lt;component&gt;</code></a></li></ul> <h3 id="другие-незначительные-изменения"><a href="#другие-незначительные-изменения" class="header-anchor">#</a> Другие незначительные изменения</h3> <ul><li>Хук жизненного цикла <code>destroyed</code> переименован в <code>unmounted</code></li> <li>Хук жизненного цикла <code>beforeDestroy</code> переименован в <code>beforeUnmount</code></li> <li><a href="javascript:;">Удалён доступ к <code>this</code> в функции значения по умолчанию входного параметра</a></li> <li><a href="javascript:;">Переименованы функции хуков директив, чтобы лучше соответствовать жизненному циклу компонента, а также удалено <code>binding.expression</code></a></li> <li><a href="javascript:;">Опцию <code>data</code> необходимо указывать только функцией</a></li> <li><a href="javascript:;">Опция <code>data</code> из примесей теперь объединяется неглубоко</a></li> <li><a href="javascript:;">Изменено поведение при приведении значения атрибутов</a></li> <li><a href="javascript:;">Переименованы некоторые классы transition</a></li> <li><a href="javascript:;">Корневой элемент <code>&lt;TransitionGroup&gt;</code> больше не создаётся по умолчанию</a></li> <li><a href="javascript:;">Отслеживание изменений массива с помощью watch будет вызывать обработчик только при замене массива. При необходимости отслеживаний изменений необходимо указывать опцию <code>deep</code>.</a></li> <li>Теги <code>&lt;template&gt;</code> без специальных директив (<code>v-if/else-if/else</code>, <code>v-for</code> или <code>v-slot</code>) теперь обрабатываются как обычные элементы и в результате будет отрисован нативный элемент  <code>&lt;template&gt;</code> вместо отрисовки его содержимого</li> <li><a href="javascript:;">Монтируемое приложение не заменяет элемент, к которому монтируется</a></li> <li><a href="javascript:;">Префикс событий жизненных хуков <code>hook:</code> был изменён на <code>vnode-</code></a></li></ul> <h3 id="удаленные-api"><a href="#удаленные-api" class="header-anchor">#</a> Удалённые API</h3> <ul><li><a href="javascript:;">Удалена поддержка <code>keyCode</code> в модификаторах <code>v-on</code></a></li> <li><a href="javascript:;">Удалены методы экземпляра $on, $off и $once</a></li> <li><a href="javascript:;">Удалены фильтры</a></li> <li><a href="javascript:;">Удалена поддержка атрибута inline-template</a></li> <li><a href="javascript:;">Удалено свойство экземпляра <code>$children</code></a></li> <li><a href="javascript:;">Удалена опция <code>propsData</code></a></li> <li>Удалён метод экземпляра <code>$destroy</code>. Пользователи больше не должны вручную управлять жизненным циклом отдельных компонентов Vue.</li> <li>Удалены глобальные функции <code>set</code> и <code>delete</code> и методы экземпляра <code>$set</code> и <code>$delete</code>. При использовании прокси для отслеживания изменений они больше не нужны.</li></ul> <h2 id="поддержка-библиотек"><a href="#поддержка-библиотек" class="header-anchor">#</a> Поддержка библиотек</h2> <p>Все официальные библиотеки и инструменты поддерживают Vue 3, но некоторые из них ещё находятся в бета-версии или в статусе релиз-кандидата. Подробная информация по отдельным библиотекам будет ниже. Многие из них на данный момент распространяются под тегом <code>next</code> в npm. <strong>Переключение на использование тега <code>latest</code> планируется, когда все официальные библиотеки будут иметь совместимые и стабильные версии.</strong></p> <h3 id="vue-cli"><a href="#vue-cli" class="header-anchor">#</a> Vue CLI</h3> <p><a href="javascript:;" target="_blank" noopener="" noreferrer=""><img src="static/picture/cli.jpg"></a></p> <p>Начиная с версии v4.5.0, <code>vue-cli</code> предоставляет из коробки опцию для выбора Vue 3 при создании нового проекта. Можно обновить <code>vue-cli</code> и выполнить команду <code>vue create</code> для создания проекта на Vue 3 уже сегодня.</p> <ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">Документация<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="vue-router"><a href="#vue-router" class="header-anchor">#</a> Vue Router</h3> <p><a href="javascript:;" target="_blank" noopener="" noreferrer=""><img src="static/picture/next.svg"></a></p> <p>Vue Router 4.0 предоставляет поддержку Vue 3 и имеет ряд собственных кардинальных изменений. Для получения более подробной информации ознакомьтесь с его <a href="index18.html" target="_blank" rel="noopener noreferrer">руководством по миграции<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <ul><li><a href="index4.html" target="_blank" rel="noopener noreferrer">Документация<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="javascript:;" target="_blank" rel="noopener noreferrer">RFCs<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="vuex"><a href="#vuex" class="header-anchor">#</a> Vuex</h3> <p><a href="javascript:;" target="_blank" noopener="" noreferrer=""><img src="static/picture/next1.svg"></a></p> <p>Vuex 4.0 предоставляет поддержку Vue 3 с тем же самым API, что и 3.x. Единственное кардинальное изменение заключается в том <a href="migrating-to-4-0-from-3-x.html#breaking-changes" target="_blank" rel="noopener noreferrer">как устанавливается плагин<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <ul><li><a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul> <h3 id="расширение-инструментов-для-разработчика"><a href="#расширение-инструментов-для-разработчика" class="header-anchor">#</a> Расширение инструментов для разработчика</h3> <p>Сейчас идёт работа над новой версией Devtools с новым интерфейсом и переработанной внутренней частью для поддержки нескольких версий Vue. Новая версия в настоящее время находится в бета-тестировании и поддерживает только Vue 3 (на данный момент). Также ведётся работа над интеграцией обновлённых версий Vuex и Router.</p> <ul><li><p>Для Chrome: <a href="javascript:;" target="_blank" rel="noopener noreferrer">Установить из магазина приложений Chrome<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ul><li>Примечание: канал обновлений с бета-версиями может конфликтовать со стабильной версией devtools, поэтому может потребоваться отключить стабильную версию для корректной работы канала обновлений с бета-версиями.</li></ul></li> <li><p>Для Firefox: <a href="javascript:;" target="_blank" rel="noopener noreferrer">Скачать подписанное расширение<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> (файл <code>.xpi</code> в Assets)</p></li></ul> <h3 id="поддержка-ide"><a href="#поддержка-ide" class="header-anchor">#</a> Поддержка IDE</h3> <p>Рекомендуется использовать <a href="javascript:;" target="_blank" rel="noopener noreferrer">VSCode<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> с нашим официальным расширением <a href="javascript:;" target="_blank" rel="noopener noreferrer">Volar<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, которое обеспечивает IDE всестороннюю поддержку Vue 3.</p> <h3 id="другие-проекты"><a href="#другие-проекты" class="header-anchor">#</a> Другие проекты</h3> <table><thead><tr><th>Проект</th> <th>npm</th> <th>Репозиторий</th></tr></thead> <tbody><tr><td>@vue/babel-plugin-jsx</td> <td><a href="javascript:;" target="_blank" rel="noopener noreferrer"><img src="static/picture/babel-plugin-jsx.svg" alt="rc"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>[<a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</td></tr> <tr><td>eslint-plugin-vue</td> <td><a href="javascript:;" target="_blank" rel="noopener noreferrer"><img src="static/picture/eslint-plugin-vue.svg" alt="ga"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>[<a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</td></tr> <tr><td>@vue/test-utils</td> <td><a href="javascript:;" target="_blank" rel="noopener noreferrer"><img src="static/picture/next2.svg" alt="beta"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>[<a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</td></tr> <tr><td>vue-class-component</td> <td><a href="javascript:;" target="_blank" rel="noopener noreferrer"><img src="static/picture/next3.svg" alt="beta"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>[<a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</td></tr> <tr><td>vue-loader</td> <td><a href="javascript:;" target="_blank" rel="noopener noreferrer"><img src="static/picture/next4.svg" alt="rc"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>[<a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</td></tr> <tr><td>rollup-plugin-vue</td> <td><a href="javascript:;" target="_blank" rel="noopener noreferrer"><img src="static/picture/next5.svg" alt="beta"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></td> <td>[<a href="javascript:;" target="_blank" rel="noopener noreferrer">GitHub<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>]</td></tr></tbody></table> <div class="custom-block info"><p class="custom-block-title">Информация</p><p>Для получения дополнительной информации о совместимости библиотек и плагинов с Vue 3, обязательно ознакомьтесь с <a href="javascript:;" target="_blank" rel="noopener noreferrer">этим issue в awesome-vue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p></div></div> <footer class="page-edit" data-v-fbe2b3da=""><div class="container" data-v-fbe2b3da=""><p data-v-fbe2b3da="">
      Опубликовано на
      <a href="javascript:;" data-v-fbe2b3da="">Netlify</a>.
      <span class="edit-link" data-v-fbe2b3da="">
        Нашли ошибку?
        <a href="javascript:;" target="_blank" rel="noopener noreferrer" data-v-fbe2b3da="">
          Исправьте эту страницу на GitHub
          <span data-v-fbe2b3da=""><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></span> <br data-v-fbe2b3da=""> <span class="prefix" data-v-fbe2b3da="">Последнее обновление страницы:</span> <span class="time" data-v-fbe2b3da="">около 2 месяцев назад</span></p></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="javascript:;">Сборка для миграции</a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper"><div class="bsa-cpc"></div></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.643be286.js" defer=""></script><script src="static/js/9.270210be.js" defer=""></script><script src="static/js/281.d362a9be.js" defer=""></script><script src="static/js/31.a05b9d5a.js" defer=""></script><script src="static/js/20.aee666d2.js" defer=""></script>
  </body>
</html>
